<template>
	<view class="bgc">
		<view class="content">
			<u-sticky offset-top="0">
				<view class="infoimg" :style="{height:`${barHeight}px`}">
					<view class="infoitem" :style="{paddingTop: `${barHeight-24}px`}">
						<img mode="fade" class="imags" src="@/static/images/logtxt.png" alt="">
					</view>
				</view>
			</u-sticky>
			<view class="contentbox">
				<view class="content"></view>
			</view>
			<view class="adddraw">
				<view class="infodraw">
					<view class="drawimg">
						<img class="drawimags" src="@/static/images/squery.png" alt="">
					</view>
					<view class="text">上传图片生成有趣的图片</view>
					<view class="btnbox">
						<view class="abtn">
							<view class="iconbox">
								<u-icon name="plus" size="14" color="#fff" bold class="plusIcon"></u-icon>
							</view>
							<view class="">选择图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="petstyle">
				<view class="activepetstyle">
					默认风格
				</view>
				<view class="">
					可爱风格
				</view>
				<view class="">
					MUJI风格
				</view>
			</view>
			<view class="madcenter">
				<view class="btn" @click="makeimg">
					<img class="img" src="@/static/images/test.png" alt="">
					<view class="">生成作品</view>
				</view>
			</view>
			<view class="pullimg">
				<view class="markt">
					图片集市
				</view>
			</view>
			<!-- <view class="imglist">
				<up-image class="infoimg" width="340rpx" height="260rpx" mode="scaleToFill" v-for="i in 10" :key="i"
					src="https://tenfei03.cfp.cn/creative/vcg/800/new/VCG211454662865.jpg"></up-image>
			</view> -->
			<u-overlay :show="show" :duration="400" :z-index ="99999999999" :opacity="0.3">
				<view class="warp">
					<view class="rect" @tap.stop>
						<view class="aipic">
							<view class="">
								<up-image width='649rpx' height="100%" mode="widthFix" src="https://pet-oss-bucket.oss-cn-beijing.aliyuncs.com/pet/2023/10/14/bg1_20231014083554A001.png" alt=""></up-image>
							</view>
							<view class="bhey">
								<img class="bheyicon" src="@/static/images/bhey.png" alt="">
							</view>
						</view>
						<view class="makimg">
							<view class="maktxt">重新生成</view>
						</view>
						
					</view>
					<view class="fottext">
						<view class="listtab">
							<view class="">
								<img class="imgs" src="@/static/images/down.png" alt="">
								<view class="text">保存到手机</view>
							</view>
							<view class="">
								<img class="imgs" src="@/static/images/down.png" alt="">
								<view class="text">保存为头像</view>
							</view>
							<view class="">
								<img class="imgs" src="@/static/images/down.png" alt="">
								<view class="text">保存到日记</view>
							</view>
							<view class="">
								<img class="imgs" src="@/static/images/down.png" alt="">
								<view class="text">分享</view>
							</view>
						</view>
						<view class="black">
							<view class="blackitem" @click="btnblack">返回</view>
						</view>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				show:false,
			}
		},
		onShow() {
			let that = this
			uni.getSystemInfo({
				success(e) {
					that.statusBarHeight = e.statusBarHeight;
					const {
						top,
						height
					} = wx.getMenuButtonBoundingClientRect()
					console.log(top, height, that.statusBarHeight, 'test')
					that.barHeight = height ? height + that.statusBarHeight + 10 : 38
				}
			})
		},
		onLoad() {},
		methods: {
			makeimg(){
				uni.hideTabBar()
				this.show=true
			},
			btnblack(){
				uni.showTabBar()
				this.show=false
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.black{
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-top: 1rpx solid #d8d8d8;
		.blackitem{
			font-size: 28rpx;
			line-height: 28rpx;
			padding-top: 47rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #262626;
			text-align: center;
			padding-bottom: 20rpx;
			margin-bottom: 27rpx;
		}
	}
	.listtab{
		display: flex;
		justify-content: space-between;
		padding: 59rpx 31rpx 0rpx 31rpx;
		.imgs{
			width: 120rpx;
			height: 120rpx;
		}
		.text{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			text-align: center;
			padding-top: 21rpx;
			padding-bottom: 44rpx;
		}
	}
	.makimg{
		margin-top: 61rpx;
		display: flex;
		justify-content: center;
		.maktxt{
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50rpx;
			display: inline-block;
			padding: 21rpx 168rpx;
			background: #DEA89C;
			border-radius: 50rpx;
			
		}
	}
	.bhey{
		padding: 40rpx 0rpx 20rpx 0rpx;
		display: flex;
		justify-content: center;
		.bheyicon{
			width: 215rpx;
			height: 48rpx;
		}
	}
	.warp{
		width: 100%;
		height: 100vh;
		padding: 0rpx 0rpx;
		position: relative;
		.rect{
			padding: 0rpx 30rpx;
		}
		.aipic{
			margin-top: 157rpx;
			background: #fff;
			display: inline-block;
			border-radius: 24rpx;
			padding: 20rpx;
			height: auto;
			.img{
				// width: 649rpx;
				display: block;
				border-radius: 16rpx;
			}
		}
		.fottext{
				position: absolute;
				bottom: 0rpx;
				width: 100%;
				background: #fff;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
			}
	}
	
	.madcenter {
		padding: 21rpx 30rpx;

		.btn {
			border-radius: 35rpx;
			padding: 26rpx 0rpx;
			background-color: #DEA89C;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			justify-content: center;

			.img {
				width: 48rpx;
				padding-right: 28rpx;
				height: 40rpx;
				position: relative;
				top: 6rpx;
				display: block;
			}
		}
	}

	.petstyle {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx 30rpx 30rpx;

		view {
			background: #F7ECE5;
			border: 1rpx solid #DEA89C;
			padding: 18rpx 55rpx;
			font-size: 26rpx;
			color: #C68B7D;
			border-radius: 18rpx;
		}

		.activepetstyle {
			color: #fff;
			background: #DEA89C;
		}
	}

	.pullimg {
		padding: 60rpx 30rpx 0rpx 30rpx;

		.markt {
			font-family: PingFangSC-Semibold;
			font-size: 40rpx;
			color: #333333;
			letter-spacing: 0;
			line-height: 40rpx;
			font-weight: 600;
		}
	}

	.adddraw {
		padding: 0rpx 30rpx;
	}

	.drawimg {
		display: flex;
		justify-content: center;
	}

	.infodraw {
		background: #F7ECE5;
		border: 2rpx dashed rgba(222, 168, 156, 1);
		border-radius: 24rpx;

		.drawimags {
			width: 132rpx;
			height: 92rpx;
			margin-top: 69rpx;
			text-align: center;
		}

		.text {
			font-size: 26rpx;
			color: #858585;
			letter-spacing: 0;
			text-align: center;
			line-height: 32rpx;
			font-weight: 400;
			text-align: center;
			padding: 31rpx 0rpx;
		}

		.btnbox {
			display: flex;
			justify-content: center;
			padding-bottom: 70rpx;
		}

		.abtn {
			display: flex;
			padding: 16rpx 44rpx;
			margin: 0 auto;
			background: #DEA89C;
			border-radius: 32px;
			font-family: PingFangSC-Medium;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 0;
			line-height: 32rpx;
			font-weight: 500;

			.iconbox {
				padding-right: 16rpx;
			}
		}
	}

	.adddraw {
		padding-top: 60rpx;
	}

	.infoimg {
		width: 100%;
		background-image: url("https://pet-oss-bucket.oss-cn-beijing.aliyuncs.com/pet/2023/10/14/bg1_20231014083554A001.png");
		background-size: 100% auto;

		.infoitem {
			padding-left: 31rpx;

			.imags {
				width: 215rpx;
				height: 48rpx;
			}
		}
	}

	.contentbox {
		background: #dea89c;
		height: 40rpx;
		padding-top: 20rpx;
	}

	.content {
		height: 40rpx;
		background-image: url("@/static/images/bg2.png");
		background-size: 100% auto;
		position: relative;
		// top: -20rpx;
		// bac
		// height: 500vh;
	}

	.bgc {
		min-height: 100vh;
		background: #F7F7F7;
	}
</style>